<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/css/log.css">
    <style>
        body,html{
            background: black;
            position: relative;
            height: 100%;
        }
        .logs {
            width: 120px;
            position: absolute;
            overflow-y: auto;
            border-radius: 4px;
            height:auto;
            top: 20px;
            left: 50%;
            margin-left:-350px;
            z-index: 999;
            color: #fff;
            font-weight: bold;
            height:auto;
            font-size:12px;
            border:solid 1px #eee;
            padding:40px 10px;
            text-shadow:0px 0px 20px #fff;
            background:#0000ff69;
            /* filter:blur(2); */
            /* pointer-events:none; */
            
        }
        .logo{
            position:absolute;
            left:50%;
            margin-left:-350px;
            background:blue;
            padding:3px;
            top:0px;
            border-radius:4px;
            color:#fff;
            font-size:12px;
            top:22px;
           
        }
        .logs.showAll{
            bottom:20px;
        }
    </style>
</head>

<body>
    <div class="logo"><span>run-logs:[&lt;/&gt;]zh-cn</span></div>
    <div class="logs showAll">
        等待任务运行中...
        {{each logs}}
        <p>{{$value}}</p>
        {{/each}}
    </div>
    <div class="roate-container">
        <div class="screen-bg"></div>
        <div id="roate1">
            <div class="roate-item icon-roate-1"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-2"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-3"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-4"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
        </div>
        <div id="roate2">
            <div class="roate-item icon-sq-1"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-sq-2"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
        </div>
    </div>
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <script src="/js/log.js"></script>
    <script>
        $(function () {
            $(".logs").animate({width:'700px'},"slow");
            function getlogs() {
                $.ajax({
                    //提交数据的类型 POST GET
                    type: "GET",
                    //提交的网址
                    contentType: 'application/json',
                    url: "/logs",
                    //提交的数据   该参数为属性值类型的参数
                    //（和url?Name="sanmao"&Password="sanmapword"一样）后台若为SpringMVC接受，注明@RequestParam
                    data:"",
                    //返回数据的格式
                    datatype: "JSON",//"xml", "html", "script", "json", "jsonp", "text".

                    success: function (data) {
                        // $(".logs").append("<div>asdasd</div>")
                        // console.log(data)
                        // $()
                        if(data.logs&&data.show){
                            if(Object.prototype.toString.call(data.logs)=="[object Array]"){
                                for(j=0,len=data.logs.length;j<len;j++){
                                    $(".logs").append("<p>"+data.logs[j]+"</p>");
                                }
                            }else{
                                $(".logs").append("<p>"+data.logs+"</p>")
                            }
                           
                        }
                        
                    },
                    //调用出错执行的函数
                    error: function () {
                        //请求出错处理
                    }
                });
            }

            var logsTime = setInterval(getlogs, 1000);

            // $(".toggle").click(function(){
            //     alert('asdad')
            //     // if($('.logs').hasClass('showAll')){
            //     //     $('.logs').removeClass('showAll')
            //     //     // $(this).text('展开')
            //     // }else{
            //     //     $('.logs').addClass('showAll')
            //     //     // $(this).text('收起')
            //     // }

                 
            // })

        })

    </script>
</body>

</html>